import React ,{useEffect,} from "react"
import {  myPage, myNewset } from "../../utils/interface"
import { useHistory } from 'react-router-dom'
import Swiper from 'swiper'
import "swiper/css/swiper.css"
import Fun from "../../utils/lazyLoad"
interface IProps{
    banner:string,
    page:myPage[],
    newest:myNewset[],
    life:myPage[],
    school:myNewset[],
    setCarIndex:Function,
    carIndex:number,
}
const HomeSwiper:React.FC<IProps>= (props) => {
    let history=useHistory()
    useEffect(() => {
        let mySwiper = new Swiper('.swiper-container', {
            on: {
                slideChange: function () {
                    let scl = document.querySelector(".nav")
                    if (props.carIndex >= 4) {
                        let num = (props.carIndex - 3) * 60;
                        (scl as Element).scrollLeft = num
                    }
                    if (props.carIndex < 4) {
                        (scl as Element).scrollLeft = 0
                    }
                    props.setCarIndex((this as { activeIndex: number }).activeIndex)
                },
            }
        })
        mySwiper.slideTo(props.carIndex, 100, false)
        new Fun()
    }, [props])
    function pushDetail(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
        if (e.target !== e.currentTarget) {
            let obj = (e.target as HTMLElement).dataset.items
            history.push({
                pathname: '/detail',
                state: JSON.parse(obj as string)
            })
        }
    }
    function pushVideo(e: React.MouseEvent<HTMLElement>){
        if(e.target!==e.currentTarget){
            let obj=JSON.parse((e.target as HTMLElement).dataset.items)
            history.push({
                pathname:'/index/video',
                state:obj
            })
        }
    }
    return   <div className="swiper-container">
    <div className="swiper-wrapper">
        <div className="swiper-slide">
            <div className='banner'>
                <img src={props.banner} alt="" />
            </div>
            <div className='page' onClick={pushDetail}>
                {
                    props.page.map((item, index) => {
                        return <dl key={index}>
                            <dt><img src={item.image} alt="" data-items={JSON.stringify(item)} /></dt>
                            <dd data-items={JSON.stringify(item)}>{item.name}</dd>
                        </dl>
                    })
                }
            </div>
            <div className='newset'>
                {
                    props.newest.map((item, index) => {
                        return <section key={index} onClick={pushVideo}>
                            <img src={item.image} alt="" data-items={JSON.stringify(item)}/>
                            <p data-items={JSON.stringify(item)}>{item.tag}</p>
                            <div className='peple' data-items={JSON.stringify(item)}>
                                <span>{item.nickname}</span>
                                <span>推荐值:{item.score}</span>
                            </div>
                        </section>
                    })
                }
            </div>
        </div>
        <div className="swiper-slide newset2">
            {
               props.life.map((item, index) => {
                    return <dl key={index}>
                        <dt><img src={item.image} alt="" /></dt>
                        <dd>{item.name}</dd>
                    </dl>
                })
            }
        </div>
        <div className="swiper-slide newset">
            {
                props.school.map((item, index) => {
                    return <div key={index}>
                        <img src={item.image} alt="" data-item={JSON.stringify(item)}/>
                        <p data-item={JSON.stringify(item)}>{item.tag}</p>
                        <div className='peple' data-item={JSON.stringify(item)}>
                            <span>{item.nickname}</span>
                            <span>推荐值:{item.score}</span>
                        </div>
                    </div>
                })
            }
        </div>
        <div className="swiper-slide">
            <div className='page'>
                {
                    props.page.map((item, index) => {
                        return <dl key={index}>
                            <dt><img src={item.image} alt="" /></dt>
                            <dd>{item.name}</dd>
                        </dl>
                    })
                }
            </div>
            <div className='banner'>
                <img src={props.banner} alt="" />
            </div>
        </div>
        <div className="swiper-slide newset">
            {
                props.newest.map((item, index) => {
                    return <div key={index}>
                        <img src={item.image} alt="" />
                        <p>{item.tag}</p>
                        <div className='peple'>
                            <span>{item.nickname}</span>
                            <span>推荐值:{item.score}</span>
                        </div>
                    </div>
                })
            }
        </div>
        <div className="swiper-slide newset">
            {
                props.life.map((item, index) => {
                    return <dl key={index}>
                        <dt><img src={item.image} alt="" /></dt>
                        <dd>{item.name}</dd>
                    </dl>
                })
            }
        </div>
        <div className="swiper-slide newset">
            slide 8
        </div>
        <div className="swiper-slide newset">
            slide 9
        </div>
        <div className="swiper-slide newset">
            slide 10
        </div>
        <div className="swiper-slide"></div>
    </div>
</div>
}
export default HomeSwiper